<style scoped lang="less">
  .cellction-box{
    .title{
      color: #252B63;
      font-size: 16px;
      font-weight: 600;
    }
    .cllection-list{
      ul{
        overflow: hidden;
      }
      li{
        padding: 25px 0;
        .img-box{
          width: 350px;
          height: 250px;
          overflow: hidden;
          img{
            width:100%;
            display: block;
          }
        }
        .parameter{
          margin-left: 400px;
          padding-top: 30px;
          position: relative;
          .parameter-top{
            overflow: hidden;
            .cancel-cllection{
              cursor: pointer;
              width:90px;
              margin-top: 2px;
              font-size: 14px;
              color: #bbb;
              border: 1px solid #bbb;
              line-height: 24px;
              text-align: center;
              letter-spacing: 2px;
            }
            .name{
              cursor: pointer;
              font-size: 18px;
              font-weight: 600;
              letter-spacing: 1px;
              .hot{
                color: #fff;
                font-size: 15px;
                display: inline-block;
                line-height: 22px;
                margin-left: 10px;
                width: 34px;
                text-align: center;
                background: url("../../../static/image/lt_14.png") 100% 100%;
              }
            }
          }
          .parameter-box{
            position: relative;
            .parameter-list{
              overflow: hidden;
              .parameter-item{
                padding-top: 22px;
                padding-bottom: 0;
                font-size: 15px;
                color: #555;
              }
              .models, .level, .sales{
                width: 40%;
              }
              .structure, .transmission, .displacement{
                width: 30%;
                span{
                  display: inline-block;
                  padding-left:11px;
                }
              }
            }
            .price{
              position: absolute;
              bottom: 0;
              left: 40%;
              font-size: 24px;
              letter-spacing: 1px;
              span{
                color: #E91715;
                font-weight: 600;
                font-size: 26px;
              }
            }
          }
        }
      }
    }
  }
  .sure-cancel{
    padding: 20px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    .box{
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 10px;
      padding: 30px 10px;
      font-size: 16px;
      text-align: center;
      .btns{
        padding-top: 30px;
        li{
          width:50%;
          .btn{
            width: 50%;
            margin: 0 auto;
            cursor: pointer;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>
<template>
  <div id="cllect">
    <div class="cellction-box">
      <div class="title">
        我收藏的产品
      </div>
      <div v-if="!noCllect" class="cllection-list">
        <div>
          <ul>
            <li v-for="(cllect, index) in cllectList">
              <div class="left img-box">
                <img :src="cllect.mo_image">
              </div>
              <div class="parameter">
                <div class="parameter-top">
                  <div class="left name">
                    {{ cllect.mo_name }}
                    <span v-if="page === 0 && index === 0" class="hot">
                    热
                  </span>
                  </div>
                  <div @click="cancelS(cllect.mo_id)" class="right cancel-cllection">
                    取消收藏
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="parameter-box">
                  <div>
                    <ul class="parameter-list">
                      <li class="left parameter-item models">
                        能源： {{ cllect.energy_name }}
                      </li>
                      <li class="left parameter-item structure">
                        结 <span>
                          构
                        </span>： {{ cllect.mo_car_body }}
                      </li>
                      <li class="left parameter-item displacement">
                        排量： {{ cllect.displacement_name }}
                      </li>
                      <li class="left parameter-item level">
                        级别： {{ cllect.level_name }}
                      </li>
                      <br>
                      <li class="left parameter-item transmission">
                        变速箱： {{ cllect.gearbox_name }}
                      </li>
                      <li class="left parameter-item sales">
                        销量： {{ cllect.mo_sales }}辆
                      </li>
                    </ul>
                  </div>
                  <div class="price">
                    售价
                    <span>
                    {{ cllect.mo_guide_price }}
                  </span>
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </li>
          </ul>
        </div>
        <div v-if="total !== 0" class="pager">
          <Page @on-change="changePage" :total="total" :page-size="3"></Page>
        </div>
      </div>
      <div v-else style="line-height: 600px; text-align: center;font-size: 20px;">
        您暂无收藏车辆
      </div>
      <div v-show="sureCancel" class="sure-cancel">
        <div class="box">
          <div>
            确定取消该收藏？
          </div>
          <div class="btns">
            <ul>
              <li class="left">
                <div @click="cancelCllect" class="btn" style="background: #2D8CF0;line-height: 40px; color: #fff;">
                  确定
                </div>
              </li>
              <li class="left">
                <div @click="sureCancel = false" class="btn" style="border: 1px solid #aaa;line-height: 38px;">
                  取消
                </div>
              </li>
              <div class="clear"></div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalCllection',
    data () {
      return {
        cllectList: [],
        noCllect: false,
        sureCancel: false,
        cllectId: -1,
        page: 0,
        total: 0
      }
    },
    methods: {
      // 获取我的收藏列表
      getCllect: function () {
        let that = this
        let page = that.page
        that.$chaos.ajax({
          url: '/Car/getMyCollection',
          userinfo: true,
          data: {
            page: page,
            limit: 3
          },
          callback: function (type, res) {
            if (type === 'success') {
              if (page === 0) {
                that.total = parseInt(res.result.count)
                if (that.total === 0) {
                  that.noCllect = true
                  return false
                }
              }
              that.noCllect = false
              that.cllectList = res.result.list
            }
          }
        })
      },
      changePage: function (e) {
        let that = this
        if (that.page === e - 1) {
        } else {
          that.page = e - 1
          that.getCllect()
          let $ = require('jquery')
          $('html,body').animate({
            scrollTop: 200
          }, 200)
        }
      },
      // 取消收藏
      cancelS: function (id) {
        let that = this
        that.cllectId = id
        that.sureCancel = true
      },
      cancelCllect: function () {
        let that = this
        let id = that.cllectId
        that.$chaos.ajax({
          url: '/Car/delUserCollection',
          data: {
            mo_id: id
          },
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              that.total = that.total - 1
              that.getCllect()
              that.that.sureCancel = false
            }
          }
        })
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '我的收藏',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.$emit('changeCurrent', 7)
      this.getCllect()
      this.setCrumbs()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>

<style>
  .pager{
    text-align: center;
    padding:20px 0;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
</style>

